<template>
    <view class="pageIndex">
        <view class="user justify-between align-center">
            <view class="headnickname justify-between align-center">
                <view class="headimg"></view>
                <view class="bibala">
                    <view class="nicknamevip align-center">
                        <view class="nick">我是昵称</view>
                        <view class="vipc">
                            <image src="@/static/icon/vip1.png" mode="scaleToFill"></image>
                            <text>金卡会员</text>
                        </view>
                    </view>
                    <view class="des">
                        欢迎您使用慧眼小程序...
                    </view>
                </view>
            </view>
            <view class="selshops align-center">
                <image src="@/static/icon/set.png" mode=""></image>
            </view>
        </view>
        
        <view class="nums justify-between">
            <view class="num">
                <view class="tit">提点金额</view>
                <view class="val">1299.00</view>
            </view>
            <view class="num">
                <view class="tit">我的订单</view>
                <view class="val">20</view>
            </view>
        </view>
        <image :src="$api.imgURL +'banner5.png'" mode="widthFix" class="banner"></image>
        <view class="actions">
            <view class="line justify-between align-center">
                <view class="left align-center">
                    <image src="@/static/icon/dindan.png" mode="widthFix"></image>
                    我推荐的
                </view>
                <uni-icons type="right" size="25"></uni-icons>

            </view>
            <view class="line justify-between align-center" @click="toRouter('withdrawal')">
                <view class="left align-center">
                    <image src="@/static/icon/tixian.png" mode="widthFix"></image>
                    申请提现
                </view>
                <uni-icons type="right" size="25"></uni-icons>
            </view>
            <view class="line justify-between align-center">
                <view class="left align-center">
                    <image src="@/static/icon/zuji.png" mode="widthFix"></image>
                    我的足迹
                </view>
                <uni-icons type="right" size="25"></uni-icons>
            
            </view>
            <view class="line justify-between align-center">
                <view class="left align-center">
                    <image src="@/static/icon/yijian.png" mode="widthFix"></image>
                    意见反馈
                </view>
                <uni-icons type="right" size="25"></uni-icons>
            
            </view>
            <view class="line justify-between align-center">
                <view class="left align-center">
                    <image src="@/static/icon/set.png" mode="widthFix"></image>
                    设置
                </view>
                <uni-icons type="right" size="25"></uni-icons>
            
            </view>
            <view class="line justify-between align-center">
                <view class="left align-center">
                    <image src="@/static/icon/kefu.png" mode="widthFix"></image>
                    联系客服
                </view>
                <uni-icons type="right" size="25"></uni-icons>
            
            </view>
        </view>
        <view style="height: 100rpx;"></view>
    </view>
</template>

<script>
	export default{
		methods:{
			toRouter(path){
				uni.navigateTo({
					url:path
				})
			}
		}
	}
</script>

<style lang="scss">
@import '../common/common.scss';
.user{
    width: 680rpx;
  
    margin-left: 48rpx;
    margin-top:  calc(var(--status-bar-height) + 50rpx);
    .headnickname{
        .headimg{
            width: 143rpx;
            height: 143rpx;
            background-color: #ccc;
            border-radius: 50%;
            border: 4rpx solid var(--common-color);
        }
        .bibala{
            margin-left: 30rpx;
            .nicknamevip{
                .nick{
                   
                    font-size: 40rpx;
                    font-weight: 400;
                    margin-right: 10rpx;
                    font-weight: bold;
                }
                .vipc{
                    width: 126rpx;
                    height: 35rpx;
                    position: relative;
                    text-align: center;
                    line-height: 35rpx;
                    text-indent: 30rpx;
                    image{
                        width: 100%;
                        height: 100%;
                        position: absolute;
                        z-index: 9;
                        left: 0;
                        top: 0;
                    }
                    text{
                        position: relative;
                        z-index: 10;
                        color: #6C2A09;
                        font-size: 18rpx;
                    }
                }
            }
            .des{
                color: var(--str-mid-color);
                font-size: 20rpx;
            }
        }
        
    }
    .selshops{
            
        image{
           width: 66rpx;
           height: 66rpx; 
        }
       
    }
}
.nums{
    margin-top: 58rpx;
    padding: 0 24rpx;
    .num{
        width: 346rpx;
        height: 216rpx;
        background-repeat: no-repeat;
        background-size: 100%;
        &:nth-child(1){
            background-image:url('@/static/images/balance.png') ;
        }
        &:nth-child(2){
            background-image:url('@/static/images/order.png') ;
        }
        .tit{
            display: inline-block;
            font-size: 30rpx;
            color: #FFFFFF;
            margin-top: 50rpx;
            margin-left: 60rpx;
        }
        .val{
            font-size: 48rpx;
            color: #FFFFFF;
            font-weight: bold;
            margin-left: 60rpx;
            margin-top: 25rpx;
        }
    }
}
.banner{
    width: 700rpx;
    margin: 0 auto;
    margin-top: 10rpx;
    display: block;
}
.actions{
    width: 700rpx;
    background: #FFFFFF;
    border-radius: 24rpx;
    margin: 0 auto;
    margin-top: 20rpx;
    .line{
        height: 100rpx;
        width: 620rpx;
        margin: 0 auto;
        border-bottom: 1px solid  #E9E9E9;
        &:last-child{
             border:none;
        }
        .left{
            font-size: 28rpx;
            color: #252A36;
            image{
               width: 49rpx; 
               margin-right: 30rpx;
            }
        }
    }
}
</style>